<template>
  <div class="editor-container">
    <div class="editor-tools" ref="editorToolsRef">
      <editor-graphic/>
    </div>
<!--    <el-scrollbar class="editor-content">-->
      <div
          class="editor-content"
           @dragover.prevent
           @drop="handelDrop"
           ref="editorContentRef"
      >
        <VueFlow
            v-model:nodes="nodes"
            :nodes-connectable="true"
            v-model:edges="edges"
            :node-types="nodeTypes"
            :zoom-on-scroll="true"
        >
          <template #node-special="specialNodeProps">
            <SpecialNode v-bind="specialNodeProps"/>
          </template>
        </VueFlow>
      </div>
<!--    </el-scrollbar>-->

  </div>
</template>
<script setup>

import EditorGraphic from "@/components/EditorGraphic.vue";
import {useVueFlow, VueFlow} from "@vue-flow/core";
import SpecialNode from "@/components/SpecialNode.vue";
import {markRaw, ref} from "vue";

const {addNodes, onConnect,onEdgesChange,project} = new useVueFlow()
const nodes = ref([])
const edges = ref([])
const nodeTypes = {
  custom: markRaw(SpecialNode),
  special: markRaw(SpecialNode),
}

const editorContentRef = ref()
const handelDrop = e => {
  const mouseX = Number(e.dataTransfer.getData("mouseX"));
  const mouseY = Number(e.dataTransfer.getData("mouseY"));

  // 获取画布容器的相对位置
  const rect = editorContentRef.value.getBoundingClientRect();

  // 计算鼠标在画布中的位置（考虑缩放）
  const projectedPosition = project({
    x: e.clientX - rect.left - mouseX,
    y: e.clientY - rect.top - mouseY,
  });

  addNodes(
      {
        id: new Date().getTime(),
        type: 'special', // <-- this is the custom node type name
        position: projectedPosition,
        data: {
          label: 'Node 4',
          hello: 'world',
          graphicConfig: JSON.parse(e.dataTransfer.getData("graphicConfig"))
        },
      }
  )
}


onConnect(param => {
  edges.value.push({
    id: `e${param.source}->${param.target} ${param.sourceHandle}->${param.targetHandle}`,
    source: param.source,
    target: param.target,
    sourceHandle: param.sourceHandle,
    targetHandle: param.targetHandle,
    // animated:true,

    style: {
      // strokeDasharray: "5 3", /* 虚线样式：实线5px，间隔3px */
      // animation: "flow 1s linear infinite", /* 2秒循环动画 */
      // stroke: "#00fbff", strokeWidth: "3px"
    },
    // class: "flowing-edge",
    // style: {
    //   stroke: '#ff0000',
    //   strokeWidth: 3,
    // }, // 设置线条颜色为红色
  },)
})

onEdgesChange(param => {

  console.log(param,"delete")
})
</script>

<style scoped>
@import '@vue-flow/core/dist/style.css';
@import '@vue-flow/core/dist/theme-default.css';

.editor-container {
  display: flex;
  height: 100vh;
}

.editor-tools {
  width: 200px;
  padding: 30px;
  box-sizing: border-box;
  border-right: 1px solid black;
}

.editor-content {
  width: calc(100vw - 200px);

  background-image: url('@/assets/images/bg_screen-c453918d.png')
}


</style>

<style>

/* 自定义流动动画 */
@keyframes flow {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -20; /* 调整数值控制速度 */
  }
}
.vue-flow__edge-path{
  stroke-dasharray: 5 3; /* 虚线样式：实线5px，间隔3px */
  animation: flow 1s linear infinite; /* 2秒循环动画 */
  stroke: #00fbff;
  stroke-width: 3px
}

/*选中的时候暂停动画*/
.vue-flow__edge.selected .vue-flow__edge-path{
  animation-play-state: paused ;
}
</style>